<template>
    <div>
        <div><h2 style="color:red;margin-left: 50%">组件通信部分 </h2></div>
        <div>
          <Connection1 ref="zi" :tfatherData="fatherData" :tmovie="movie" @t="tclick" @t2="tclick2"></Connection1>
        </div>
        <h2>父组件显示子组件信息  子传父</h2>
        <div>使用emit点击按钮显示子传父数的数据:{{sonData}}</div>
        <el-button @click="refsApply">ref访问子组件数据</el-button>
        <Bus></Bus>
    </div>
</template>

<script>
  import Connection1 from "@/views/vue/component/communication/Connection1";
  import Connection2 from "@/views/vue/component/communication/Connection2";
  import Bus from "@/views/vue/component/communication/Bus";
    export default {
        name: "CompConnection",
        components:{
          Connection1,
          Bus
        },
        data(){
            return{
              fatherData:{
                name:'wf',
                age:40,
                phone:'15056103333',
                wealth:10000,
                hobby:['吃饭','睡觉','打游戏'],
                sons:[
                  {id:1,name:'wfson1',age:20},
                  {id:2,name:'wfson1',age:21},
                  {id:3,name:'wfson1',age:22}
                ]
              },
              movie:['MV1','MV2','MV3'],
              sonData: ''
            }
        },

        computed:{

        },
      mounted() {
          //监听bus事件  通常是在mounted 里面监听
          this.$bus.$on('busbus',(data)=>{
            console.log('busbus',data)
          })

      },
      methods:{
          tclick(sonData){
            console.log(sonData)
            this.sonData=sonData
          },
          tclick2(item){
            console.log(item)
          },
          refsApply(){
            console.log(this.$refs.zi.hobby)
            this.$refs.zi.zimethods()
          },
          famethods(){
            console.log('我是父组件famethods方法')
          },

        }
    }
</script>

<style scoped>

</style>
